@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,800);

$backgroundColor: #393939;
$fontColor: #f1f1f1;
$defaultPadding: 0.5em;
$topicPadding: 0.7em;
$fontFamily: 'Open Sans', Helvetica, sans-serif;
$fontSize: 1.5em;

body {
  font-family: $fontFamily;
  font-size: $fontSize;
  background: $backgroundColor;
  color: $fontColor;
  margin: $defaultPadding * 2;
}

a {
  text-decoration: none;
  color: $fontColor;
}

p > a {
  text-decoration: underline;
}

#header {
  font-size: $fontSize / 2;
  text-align: right;
}

@mixin flex($flow) {
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-flow: $flow;
  -ms-flex-flow: $flow;
  -moz-flex-flow: $flow;
  -o-flex-flow: $flow;
  flex-flow: $flow;
}

@mixin align-items($position) {
  -webkit-align-items: $position;
  -ms-align-items: $position;
  -moz-align-items: $position;
  -o-align-items: $position;
  align-items: $position;
}

@mixin justify-content($position) {
  -webkit-justify-content: $position;
  -ms-justify-content: $position;
  -moz-justify-content: $position;
  -o-justify-content: $position;
  justify-content: $position;
}

.flex-box-container-column {
  @include flex(column);
}

.flex-box-container-row {
  @include flex(row wrap);
}

.result-heading {
  margin-left: $defaultPadding;
  margin-top: $defaultPadding;
  font-weight: 300;
}

.box {
  margin: $defaultPadding;
  padding: $defaultPadding;
  border: 1px solid lighten($backgroundColor, 5%);
  border-radius: $defaultPadding;
  background: darken($backgroundColor, 5%);
}

$profileThumbnailSize: 2em;

#user-box {
  height: $profileThumbnailSize;
}

#user-box div {
  @include flex(row);
  @include align-items(center);
}

#profile-thumbnail {
  height: $profileThumbnailSize;
  width: $profileThumbnailSize;
  margin-right: $defaultPadding;
}

#search-term {
  height: $fontSize;
  font-family: $fontFamily;
  width: 90%;
  max-width: 20em;
  padding: $defaultPadding;
  background-color: lighten($backgroundColor, 80%);
}

#search-icon {
  font-size: $fontSize * 1.5;
  margin-left: $defaultPadding;
}

ul {
  list-style: none;
  margin: $defaultPadding;
  padding: 0;
}

li {
  margin-top: $topicPadding;
  margin-bottom: $topicPadding;
  margin-right: $topicPadding;
  display: inline;
}

#topic-results > li:hover {
  cursor: pointer;
  background-color: lighten($backgroundColor, 5%);
}

$originalThumbnailHeight: 360px;
$originalThumbnailWidth: 480px;
$desiredThumbnailHeight: $originalThumbnailHeight * 0.75;

$videoActionsHeight: 60px;

.result-container {
  margin: $defaultPadding;
  width: $originalThumbnailWidth;
  border: 1px solid lighten($backgroundColor, 5%);
}

.player-container {
  width: $originalThumbnailWidth;
  height: $desiredThumbnailHeight;
  position: relative;
}

.title {
  opacity: 0.9;
  padding: $defaultPadding;
  position: absolute;
  background: $backgroundColor;
  top: $defaultPadding;
  left: $defaultPadding;
  right: $defaultPadding;
}

.thumbnail-image {
  cursor: pointer;
  position: absolute;
  top: -($originalThumbnailHeight / 8);
  clip: rect(($originalThumbnailHeight / 8) $originalThumbnailWidth ($originalThumbnailHeight - ($originalThumbnailHeight / 8)) 0);
  width: $originalThumbnailWidth;
  height: auto;
}

.button-container {
  padding: $defaultPadding;
  @include flex(row);
  @include justify-content(center);
  @include align-items(center);
}

.button-container > button {
  font-family: $fontFamily;
  font-size: $fontSize / 2;
  width: $fontSize * 5;
  margin: 0 ($defaultPadding / 2) 0 ($defaultPadding / 2);
  padding: $defaultPadding / 2;
  border: 0;
  color: lighten($backgroundColor, 60%);
  background-color: lighten($backgroundColor, 10%);
}

iframe {
  display: block;
}